import React, { PureComponent } from 'react'

import {
  Comment,
  Tooltip, 
  Avatar 
} from 'antd'

import { DeleteOutlined } from "@ant-design/icons";

import 'moment/locale/zh-cn'  //导入中文 默认展示

export default class CommentItem extends PureComponent {
  render() {
    const { name, date, avatar, content } = this.props.commentItem
    return (
      <Comment
        author={<a href="/#">{ name }</a>}
        avatar={<Avatar src={avatar} alt={name} />}
        content={<p>{ content }</p>}
        datetime={
          <Tooltip title={date.format('YYYY-MM-DD HH:mm:ss')}>
            <span>{date.fromNow()}</span>
          </Tooltip>
        }
        actions={[
          <span onClick={this.handleRemoveItem.bind(this)}><DeleteOutlined />删除</span>
        ]}
      />
    )
  }

  handleRemoveItem() {
    this.props.removeItemChange()
  }
}
